<template>
  <div class="box">
    <div style="margin-bottom: 30px;border-bottom: 2px solid rgb(242 242 242)">
      <p class="p_title">
        <el-button type="text" style="float: left;color: #000;font-size: 16px">组织单位信息</el-button>
      </p>
      <table class="tableCl" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>组织类型:</td>
          <td>{{info.orgZzlx}}</td>
          <td>组织机构名称:</td>
          <td>{{info.orgname}}</td>
        </tr>
        <tr>
          <td>单位简称</td>
          <td>{{info.orgsname}}</td>
          <td>组织机构代码</td>
          <td>{{info.orgcode}}</td>
        </tr>
        <tr>
          <td>描述</td>
          <td colspan="3">{{info.description}}</td>
        </tr>
      </table>
    </div>
    <div>
      <p style="color:rgb(49,148,185);margin: 20px 0">管理员列表</p>
      <el-table
        :data="tableData"
        border
        style="width: 100%;">
        <el-table-column
          align='center'
          prop="displayname"
          label="管理员"
          width="80">
        </el-table-column>
        <el-table-column
          align='center'
          prop="account"
          label="登录账户"
          width="180">
        </el-table-column>
        <el-table-column
          align='center'
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          align='center'
          prop="statusZt"
          label="状态"
          width="150">
        </el-table-column>
        <el-table-column
          align='center'
          prop="status"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button size="small" @click="seeEvent(5,1,scope.row)">查看</el-button>
            <el-button size="small" @click="seeEvent(2,2,scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  弹框 -->
    <el-dialog title="编辑管理员" :visible.sync="seeAdmin" width="35%"
               :before-close="handleAdminClose" :modal-append-to-body="false">
      <el-form :model="editAdminForm" :rules="rules" ref="editAdminForm" label-width="130px">
        <el-form-item label="身份证号" prop="sid" class="el_w">
          <el-input v-model="editAdminForm.sid">
          </el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="displayname" class="el_w">
          <el-input v-model="editAdminForm.displayname"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account" class="el_w">
          <el-input v-model="editAdminForm.account"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" class="el_w">
          <el-select v-model="editAdminForm.sex" placeholder="请输入性别" style="width: 100%">
            <el-option
              v-for="item in sexBox"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description" class="el_w">
          <el-input v-model="editAdminForm.description"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" class="el_w">
          <el-input v-model="editAdminForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" class="el_w">
          <el-input v-model="editAdminForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" class="el_w">
          <el-select v-model="editAdminForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option
              v-for="item in statusBox"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAddUnit">确 定</el-button>
        </span>
    </el-dialog>

    <div style="margin:20px 0;">单位权限信息</div>
    <table style="width: 100%;margin: 0 015px 0;" class="personalTable" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td>系统管理权限</td>
        <td colspan="11">
          <span class="span" v-for="item in dirRightList">{{item.name}}</span>
          <span class="span1" v-if="!dirRightList.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>项目报建权限</td>
        <td colspan="11">
          <span class="span" v-for="item in Box1">{{item.name}}</span>
          <span class="span1" v-if="!Box1.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>设计方案权限</td>
        <span class="span" v-for="item in Box2">{{item.name}}</span>
        <span class="span1" v-if="!Box2.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>施工许可权限</td>
        <span class="span" v-for="item in Box3">{{item.name}}</span>
        <span class="span1" v-if="!Box3.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收权限</td>
        <span class="span" v-for="item in Box4">{{item.name}}</span>
        <span class="span1" v-if="!Box4.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>咨询服务权限</td>
        <span class="span" v-for="item in Box5">{{item.name}}</span>
        <span class="span1" v-if="!Box5.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>掘占路等咨询</td>
        <span class="span" v-for="item in Box6">{{item.name}}</span>
        <span class="span1" v-if="!Box6.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收提前查看</td>
        <span class="span" v-for="item in Box7">{{item.name}}</span>
        <span class="span1" v-if="!Box7.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>事中事后监管权限</td>
        <span class="span" v-for="item in Box8">{{item.name}}</span>
        <span class="span1" v-if="!Box8.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>掘占路等许可权限</td>
        <span class="span" v-for="item in Box9">{{item.name}}</span>
        <span class="span1" v-if="!Box9.length">{{'暂无数据'}}</span>
      </tr>
    </table>
  </div>
</template>

<script>

  import {$aos} from '../../../store/state';
  import {http} from '../../../assets/commonjs/axios';
  import {delSurplus, templateType} from "../../../assets/commonjs/utils";

  export default {
    name: "unitSee",
    data() {
      return {
        // ==================== 管理员编辑弹窗 =============================
        seeAdmin: false,
        editAdminForm: {
          urId:'',
          uid: '',
          applyType: 2,//1：新建 2.编辑 3.删除 4 预览
          sid: '',//身份证号
          displayname: '',//姓名
          account: '',//账号
          sex: "",//性别
          description: "",//描述
          email: "",//邮箱,
          phone: "",//手机号
          status: "",//状态
        },
        rules: {
          sid: [
            {required: true, message: "请填写身份证号", trigger: "blur"}
          ],
          displayname: [
            {required: true, message: "请填写姓名", trigger: "blur"}
          ],
          account: [
            {required: true, message: "请填写账号", trigger: "blur"}
          ],
          sex: [
            {required: true, message: "请选择性别", trigger: "blur"}
          ],
          phone: [
            {required: true, message: "请填写手机号", trigger: "blur"}
          ],
        },
        sexBox: [   //性别的下拉框数据
          {id: "男", value: "男"},
          {id: "女", value: "女"},
        ],
        statusBox: [///状态的下拉框数据
          {value: 0, label: "无效"},
          {value: 1, label: "有效"},
        ],
        // =================================================================
        obj: {
          applyType: 4,//1 新增 2 编辑 3 注销 4 查看
          orgId: this.$route.query.orgId
        },
        typeData: [],
        info: {},
        tableData: [],
        value2: true,//状态
        //1.项目信息 2.设计方案 3.施工许可 4.竣工验收 5.技术咨询 6.监管意见
        Box1: [],
        Box2: [],
        Box3: [],
        Box4: [],
        Box5: [],
        Box6: [],
        Box7: [],
        Box8: [],
        Box9: [],
        name: '',
        value: '',
        dirRightList: [],
      }
    },
    created() {
      $aos.getItem('typeData').then(res => {
        this.typeData = res;
      });
      this.seeqxEvent();
      this.getInfo();
      this.getadminList();
    },
    methods: {
      //查看组织单位信息
      getInfo() {
        http('post', 'permission/opera_org', {
          org: this.obj
        }).then(res => {
          if (res.data.success) {
            let info = res.data.data
            this.info = info.org
            this.typeData.forEach(item => {
              if (this.info.orgtypeid === item.cityAreaType) {
                this.info.orgZzlx = item.typeName
              }
            })
          } else {
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })
      },
      //查看管理员列表
      getadminList() {
        http('post', 'permission/list_user', {
          orgId: this.$route.query.orgId,
        }).then(res => {
          if (res.data.success) {
            let info = res.data.data
            this.tableData = info
            this.tableData.forEach(item => {
              if (item.status === 1 || item.status === 2) {
                item.statusZt = '有效'
              } else if (item.status === 0) {
                item.statusZt = '无效'
              }
            })
          } else {
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })
      },
      seeEvent(key, index, row) {
        if (key === 2) {
          this.seeAdmin = true;
          this.editAdminForm = delSurplus(row, this.editAdminForm);
          this.editAdminForm.applytype = 2;
        } else if (key === 5) {
          $aos.setItem('tabNum', key);
          $aos.setItem('adminData', row);
          this.$router.push({path: '/containerDetails', query: {index: index, orgId: row.orgid,orgs:this.obj.orgId}});
          setTimeout(_ => {
            this.$router.push({path: '/containerDetail', query: {index: index, orgId: row.orgid,orgs:this.obj.orgId}});
          },)
        }
      },
      //管理员关闭事件
      handleAdminClose(done) {
        this.$refs.editAdminForm.resetFields();
        done()
      },
      //管理员编辑弹窗确定事件
      submitAddUnit() {
        http('post', 'permission/opera_user', {
          user: this.editAdminForm
        }).then(res => {
          if(res.data.success){
            this.seeAdmin = false;
            this.getadminList();
            this.$message({message: res.data.msg, type: 'success'});
          }else{
            this.$message({message: res.data.msg, type: 'warning'});
          }
        })
      },


      //查看权限
      seeqxEvent() {
        http('post', 'permission/opera_org', {
          org: this.obj
        }).then(res => {
          if (res.data.success) {
            let list = res.data.data.org;
            let opeRightList = list.opeRightsList;
            this.value = templateType(res.data.data.orgType.type);
            if (list.dirRightsList && list.dirRightsList.length > 0) {
              this.dirRightList = list.dirRightsList;
            }
            if (opeRightList && opeRightList.length > 0) {
              opeRightList.forEach((item) => {
                if (item.type === 1) {
                  this.Box1.push(item)
                } else if (item.type === 2) {
                  this.Box2.push(item)
                } else if (item.type === 3) {
                  this.Box3.push(item)
                } else if (item.type === 4) {
                  this.Box4.push(item)
                } else if (item.type === 5) {
                  this.Box5.push(item)
                } else if (item.type === 6) {
                  this.Box6.push(item)
                }else if (item.type === 7) {
                  this.Box7.push(item)
                }else if (item.type === 8) {
                  this.Box8.push(item)
                }else if (item.type === 9) {
                  this.Box9.push(item)
                }
              })
            }
          }
        })
      }

    },
  }
</script>

<style scoped>
  .box {
    background: #fff;
    height: 100%;
    padding: 0 30px 50px 30px;
  }

  .tableCl {
    margin: 20px 0;
  }

  .tableCl th {
    font-size: 16px;
  }

  .tableCl tr {
    height: 50px;
  }

  .tableCl tr:nth-child(odd) {
    background: #FAFAFA;
  }

  .tableCl tr:hover {
    background: #f5f7fa;
  }

  .tableCl tr td {
    line-height: 190%;
    font-size: 16px;
    padding: 10px;
    border-top: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
  }

  .tableCl tr td:nth-child(odd) {
    text-align: right;
    width: 20%;
    color: black;
  }

  .tableCl tr td:nth-child(even) {
    width: 30%;
    color: #999;
  }

  .tableCl tr td:last-child {
    border-right: 0;
  }

  .tableCl tr:last-child > td {
    border-bottom: 1px solid #f6f6f6;
  }

  .personalTable tr td {
    font-size: 14px;
    width: 200px;
  }

  .personalTable tr td:nth-child(1) {
    text-align: center;
  }

  .personalTable tr:nth-child(odd) {
    background: #eeeeee;
    height: 50px;
    line-height: 50px;
  }

  .personalTable tr:nth-child(even) {
    background: white;
    height: 50px;
    line-height: 50px;
  }
  span.span{
    display: inline-block;
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    padding:0 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: white;
    margin: 0 10px;
  }
  span.span1{
    font-size: 14px;
    padding:10px 20px;
    border-radius: 2px;
    margin: 0 10px;
    color: #999;
  }
</style>
